import { Drawer, List, ListItem, ListItemText, Typography, Box } from '@mui/material';
import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

const Navigation: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const menuItems = [
    { title: '首页', path: '/' },
    { title: 'JavaScript基础', path: '/javascript-basics' },
    { title: 'JavaScript进阶', path: '/javascript-advanced' },
    { title: 'React基础', path: '/react-basics' },
    { title: 'React进阶', path: '/react-advanced' },
    { title: '数据结构', path: '/data-structures' },
    { title: '算法', path: '/algorithms' },
    { title: 'Todo List', path: '/todo' },
  ];

  const drawerWidth = 240;

  return (
    <Drawer
      variant="permanent"
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          width: drawerWidth,
          boxSizing: 'border-box',
          backgroundColor: '#1976d2',
          color: 'white',
        },
      }}
    >
      <Box sx={{ pt: '64px' }}>
        <Typography
          variant="h6"
          component="div"
          sx={{
            p: 2,
            textAlign: 'center',
            borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
          }}
        >
          React 学习教程
        </Typography>
        <List>
          {menuItems.map(item => (
            <ListItem
              key={item.path}
              button
              onClick={() => navigate(item.path)}
              sx={{
                backgroundColor: location.pathname === item.path ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
                '&:hover': {
                  backgroundColor: 'rgba(255, 255, 255, 0.12)',
                },
              }}
            >
              <ListItemText primary={item.title} />
            </ListItem>
          ))}
        </List>
      </Box>
    </Drawer>
  );
};

export default Navigation;
